<template>
  <div v-loading="loading">
    <h1>磁盘信息</h1>
    <hr style="margin-bottom: 1%;margin-top: 0"/>
    <div v-if="type===1">
    <p>文件大小：{{fileDisk.length*64}}KB</p>
    <p>文件占用磁盘数：{{fileDisk.length}}</p>
    </div>
    <div v-if="type!==1">
      <p>已用空间：{{disCount*64}}KB&emsp;&emsp;&emsp;&emsp;剩余空间：{{(128-disCount)*64}}KB</p>
      <p>总占用磁盘数：{{disCount}}&emsp;&emsp;&emsp;&emsp;剩余磁盘数：{{128-disCount}}</p>
    </div>
    <el-row :gutter="0">
      <el-col v-for="(item,index) in diskList" :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
        <el-tooltip class="item" effect="dark"  placement="top">
          <div slot="content">状态:{{textStatus(item.status)}}<br/>磁块号:{{index}}</div>
          <div>
            <img v-if="item.status === 0" src="~@/assets/img/green-disk.png">
            <img v-if="item.status === 1 "src="~@/assets/img/blue-disk.png">
            <img v-if="item.status === 2 "src="~@/assets/img/orange-disk.png">
            <img v-if="item.status === 3 "src="~@/assets/img/red-disk.png">
            <div style="margin-top: -15px;margin-left: 5px;font-size: 15px;color: black">
              {{index}}
            </div>
          </div>
        </el-tooltip>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer" style="float:right; margin-top:-5%;margin-right: 3%">
      <el-button type="success" size="medium">⚪空闲</el-button>
      <el-button type="warning" size="medium"style="margin-left:20px;">⚪系统文件</el-button>
      <el-button type="primary" size="medium"style="margin-left:20px;">⚪占用</el-button>
      <el-button v-if="type === 1" type="danger" size="medium"style="margin-left:20px;">⚪当前文件</el-button>
    </span>
    <span slot="footer" class="dialog-footer" >
      <el-button @click="goback">返回</el-button>
    </span>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        diskList:[],
        fileDisk:[],
        dirDisk:[],
        file:{},
        type: 0,
        loading: false,

      }
    },
    computed: {

    },
    activated(){
      this.init();


    },
    methods: {
      textStatus(status){
        switch(status){
          case 0:return '空闲';
          case 1:return '占用';
          case 2:return '系统占用';
          case 3:return '当前文件';
        }
      },
      // 初始化
      init () {
        let type = this.$route.params.type;
        this.type = type;
        console.log("params=");
        console.log(this.$route.params);
        this.diskList = [];
        for(var i = 0;i<128;i++){
          let v = {
            index:i,
            status: 0
          };
          if(i<2){
            v.status = 2;
          }
          this.diskList.push(v);
          //空闲
        }

        this.initAll();

      },
      simpleFile(){
        if(this.type === 1){ //单文件详情
          console.log("init");
          this.file = this.$route.params.file;
          this.fileDisk = this.$route.params.fileDisk;
          for(var j = 0;j<this.fileDisk.length;j++){
            console.log("index="+this.fileDisk[j]);
            this.diskList[this.fileDisk[j]].status = 3;//当前占用
          }
          console.log(this.diskList);
        }
      },
      goback(){
        this.$router.push({
          name: 'file',
        })
      },
      getDir(){

      },
      initAll(){
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl('/file/disk'),
          method: 'get',
        }).
        then(({data}) => {
          if (data && data.code === 200) {
            this.fileDisk = data.data.diskList;
            if(this.fileDisk) {
              for (var j = 0; j < this.fileDisk.length; j++) {
                this.diskList[this.fileDisk[j]].status = 1;//占用
              }
            }

            this.dirDisk = data.data.disks;
            if(this.dirDisk) {
              for (var j = 0; j < this.dirDisk.length; j++) {
                this.diskList[this.dirDisk[j]].status = 2;//系统信息
              }
            }
          }
          this.simpleFile();
          this.loading = false;
        })
      }
    },
    computed:{
      disCount(){
        let count = 0;
        for(var i = 0;i<128;i++){
          if(this.diskList[i].status!==0){
            count++;
          }
        }
        return count;
      }
    }
  }
</script>

<style scoped>
  .user{
    width:50%;
  }

  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 5px;
  }

  img{
    /*width:40px;*/
    width:100%;
    height:auto;
  }
  .item {
    margin: 2px;
  }
</style>
